<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Parameters
        const origin = { x: 250, y: 100 };
        const coneAngle = Math.PI / 7; // Half-angle alpha
        const coneDrawHeight = 230;
        const coneBaseRadius = coneDrawHeight * Math.tan(coneAngle);

        // 1. Draw Cone
        // Left slant line
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(origin.x - coneBaseRadius, origin.y + coneDrawHeight);
        ctx.stroke();
        // Right slant line
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(origin.x + coneBaseRadius, origin.y + coneDrawHeight);
        ctx.stroke();
        // Dashed base
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.ellipse(origin.x, origin.y + coneDrawHeight, coneBaseRadius, coneBaseRadius * 0.3, 0, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.setLineDash([]);


        // 2. Draw m1 (inside) and its string
        const r1 = 140; // length of string for m1
        const m1_pos = { x: origin.x - 30, y: origin.y + r1 };
        // String for m1
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(m1_pos.x, m1_pos.y);
        ctx.stroke();
        // Mass m1 (hollow circle)
        const massRadius = 7;
        ctx.beginPath();
        ctx.arc(m1_pos.x, m1_pos.y, massRadius, 0, 2 * Math.PI);
        ctx.stroke();
        // Label m1
        ctx.font = 'italic 22px serif';
        ctx.fillText('m₁', m1_pos.x + 25, m1_pos.y + 5);


        // 3. Draw m2 (outside) and its string
        const r2 = 165; // length of string for m2
        const m2_pos = {
            x: origin.x + r2 * Math.sin(coneAngle),
            y: origin.y + r2 * Math.cos(coneAngle)
        };
        // String for m2 (overlaps with cone line, which is correct)
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(m2_pos.x, m2_pos.y);
        ctx.stroke();
        // Mass m2 (hollow circle)
        ctx.beginPath();
        ctx.arc(m2_pos.x, m2_pos.y, massRadius, 0, 2 * Math.PI);
        ctx.stroke();
        // Label m2
        ctx.fillText('m₂', m2_pos.x + 25, m2_pos.y + 5);

        // 4. Draw Angle alpha
        // Dashed line along z-axis for reference
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(origin.x, origin.y + 60);
        ctx.stroke();
        ctx.setLineDash([]);
        // Arc for alpha
        ctx.beginPath();
        ctx.arc(origin.x, origin.y, 45, Math.PI / 2, Math.PI / 2 + coneAngle);
        ctx.stroke();
        // Label alpha
        const alpha_label_angle = Math.PI / 2 + coneAngle / 1.8;
        const alpha_label_radius = 28;
        ctx.fillText('α', origin.x + alpha_label_radius * Math.cos(alpha_label_angle),
                         origin.y + alpha_label_radius * Math.sin(alpha_label_angle));

        // 5. Draw Coordinate Axes
        // z-axis
        drawArrow(ctx, origin.x, origin.y, origin.x, origin.y - 70);
        ctx.fillText('z', origin.x, origin.y - 85);
        // y-axis
        drawArrow(ctx, origin.x, origin.y, origin.x + 100, origin.y);
        ctx.fillText('y', origin.x + 110, origin.y);
        // x-axis
        drawArrow(ctx, origin.x, origin.y, origin.x - 70, origin.y + 35);
        ctx.fillText('x', origin.x - 80, origin.y + 25);


        // 6. Draw Figure Caption
        ctx.font = '20px serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.76.', canvas.width / 2, canvas.height - 30);
    </script>
</body>
</html>